<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-template组件</title>
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <div id="demo"></div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        // 1.0 在vue中扩展一个子组件 - vue就是玩配置的
        const Son = Vue.extend({
            // 在今后的组件中，数据必须是函数里面return一个对象
            data() {
                return {
                    num: 10
                }
            },
            methods: {
                fn() {
                    this.num += 10
                }
            },
            template: `
                <div>
                    <h3>template属性的使用</h3>
                    <p>{{ num }}</p>
                    <button @click="fn">点击增加</button>
                </div>
            `
        })

        // 得到的结果是一个 VueComponent 函数
        // console.log(Son)
        
        new Vue({
            el: '#demo',
            // 2.0 把扩展的子组件挂载到vm实例上
            components: {
                simple: Son
            },
            // 3.0 需要以标签的形式把子组件挂载到页面
            template: `
                <div>
                    <simple></simple>
                </div>
            `
        })
    </script>
</body>
</html>